<!--菜单页面-->
<template>
  <!--配置区域-->
  <div class="body-left" :class="menuCollapse">
    <div class="left-content" data-blank="blankPage">
      <!--基本配置-->
      <div class="content-arrangement">
        <div class="arrangement-item" @click="templatesAreCopiedAndAdded({ moduleId: 'basicConfiguration' })">
          <div class="item-basis" :class="itemActive('basicConfiguration')">
            <img :src="getImgUrl('basicConfiguration')" alt="基础配置" />
            基础配置
          </div>
        </div>
        <!-- <div class="arrangement-item" @click="templatesAreCopiedAndAdded({ moduleId: 'groupConfiguration' })">
          <div class="item-basis" :class="itemActive('groupConfiguration')">
            <img :src="getImgUrl('basicConfiguration')" alt="基础配置" />
            组配置
          </div>
        </div>-->
      </div>
      <!--模块设置-->
      <div class="content-arrangement" data-blank="blankPage">
        <div
          class="arrangement-item"
          @click="templatesAreCopiedAndAdded(item)"
          v-for="item in MENU_CONFIGURATION"
          :key="item.moduleType"
        >
          <div class="item-basis" :class="itemActive(item.moduleId)">
            <img :src="getImgUrl(item.moduleId)" :alt="item.moduleId" />
            {{ MENU_NAME_CONFIGURATION[item.moduleId] }}
          </div>
        </div>
      </div>
      <!--投票和选择题和简答题模板-->
      <div class="content-arrangement">
        <div class="arrangement-item" v-for="item in POLL_TEMPLATE" :key="item.moduleType">
          <div class="item-module" :class="itemActive(item.moduleId)">
            <div class="module-img">
              <img src="@/assets/images/toupiao.png" alt="toupiao" @click="templatesAreCopiedAndAdded(item)" />
            </div>
            {{ MENU_NAME_CONFIGURATION[item.moduleId] }}
          </div>
        </div>
      </div>
      <!--参与率和得分数模板-->
      <div class="content-arrangement" v-show="false">
        <div
          class="arrangement-item"
          @click="templatesAreCopiedAndAdded(item)"
          v-for="item in SCORE_PARTICIPATION"
          :key="item.moduleType"
        >
          <div class="item-module" :class="itemActive(item.moduleId)">
            <div class="module-img">
              <img src="@/assets/images/toupiao.png" alt="toupiao" />
            </div>
            {{ MENU_NAME_CONFIGURATION[item.moduleId] }}
          </div>
        </div>
      </div>
    </div>
    <div class="arrow" @click="hideMenu">
      <el-icon class="icon"><DArrowLeft v-if="leftSidebarState" /> <DArrowRight v-else /></el-icon>
    </div>
  </div>
  <!--批量新增弹窗-->
  <el-dialog
    v-model="dialogVisible"
    title="批量新增"
    width="480"
    center
    align-center
    class="addInBatches"
    :close-on-click-modal="false"
  >
    <span class="addInBatches-text">根据上传的表格，批量新增模板。</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" class="download">
          <a
            :href="downloadUrl(sampleFiles)"
            :download="sampleFiles === BEAUTIFUL_MOBILE_NAME ? '投票模块模板.xlsx' : '选项题目模板.xlsx'"
            >下载示例表格</a
          >
        </el-button>
        <el-upload
          ref="upload_Ref"
          action=""
          :http-request="httpExcelRequest"
          :limit="1"
          :show-file-list="false"
          class="uploadExcelContent"
          :data="{}"
        >
          <el-button type="danger" class="upload">上传表格</el-button>
        </el-upload>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { v4 } from "uuid";
import { useTemplateEditing } from "@/store/modules/templateEditing";
import {
  MENU_CONFIGURATION,
  MENU_NAME_CONFIGURATION,
  POLL_TEMPLATE,
  SCORE_PARTICIPATION,
  FIRST_FORM,
  BEAUTIFUL_MOBILE_NAME,
  SELECTED_STATUS,
} from "@/utils/mockConfiguration/mockConfig.js";
import { DArrowLeft, DArrowRight } from "@element-plus/icons-vue";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import * as xlsx from "xlsx";
import useEditThePage from "@/utils/editTheConfiguration/index";
const { templatesAreCopiedAndAdded } = useEditThePage(); //菜单点击添加模块
const templateEditing = useTemplateEditing();
const { menuButton } = storeToRefs(templateEditing); //模板编辑页面数据
const { updateDimensions } = templateEditing; //响应式高度
const dialogVisible = ref(false); //批量新增弹窗
const leftSidebarState = ref(true); //左侧边栏状态
const sampleFiles = ref("beautifulMobilePerson"); //默认示例表格文件
const addedADefaultTemplate = ref({}); //表格默认模板
/**
 * 左菜单样式
 */
const menuCollapse = computed(() => (leftSidebarState.value ? "body-left-unfold" : "body-left-collapse"));
/**
 * 隐藏左菜单
 */
const hideMenu = () => {
  leftSidebarState.value = !leftSidebarState.value;
  updateDimensions(v4());
};
/**
 * 菜单项激活样式
 * @param type 菜单项类型
 */
const itemActive = type => ({ [SELECTED_STATUS]: menuButton.value === type });
/**
 * 读取文件
 * @param file
 * @returns {Promise<unknown>}
 */
const readFile = file =>
  new Promise(resolve => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = ev => {
      resolve(ev.target?.result);
    };
  });
const upload_Ref = ref(null); //上传文件实例
/**
 * 异步请求函数，用于处理Excel文件的上传和解析
 * @param file 上传操作对象，包括文件等参数
 */
const httpExcelRequest = async ({ file }) => {
  // 读取Excel文件的二进制数据
  const dataBinary = await readFile(file);
  // 使用xlsx库解析二进制数据，支持将日期单元格转换为Date对象
  const workBook = xlsx.read(dataBinary, { type: "binary" });
  // 默认只需要获取工作表的第一个工作表
  const workSheet = workBook.Sheets[workBook.SheetNames[FIRST_FORM]];
  // 将工作表转换为JSON对象，第一行作为列头
  const excelData = xlsx.utils.sheet_to_json(workSheet);
  upload_Ref.value.clearFiles();
};
/**
 * 打开批量新增弹窗
 */
const addedPopUpWindow = value => {
  addedADefaultTemplate.value = value;
  sampleFiles.value = value.moduleId;
  dialogVisible.value = true;
};
/**
 * 获取下载地址
 * @param value 文件名
 */
const downloadUrl = value => new URL(`../../../../${value}.xlsx`, import.meta.url).href;
/**
 * 根据配置类型获取图片地址
 */
const getImgUrl = id => new URL(`../../../assets/images/${id}.png`, import.meta.url).href;
</script>

<style scoped lang="less">
.body-left {
  height: 100%;
  display: flex;
  white-space: nowrap;
  position: relative;
  .left-content {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 0 10px 0 #d2dded;
    padding: 20px 10px 40px;
    display: flex;
    flex-direction: column;
    //基本设置
    .content-arrangement {
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #e5e7ec;
      height: auto;
      font-size: 14px;
      .arrangement-item {
        width: 50%;
        height: auto;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        .item-basis,
        .item-module {
          width: 100%;
          height: 102px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          row-gap: 6px;
          border-radius: 10px;
          cursor: pointer;
        }
        .item-basis {
          img {
            width: 30px;
          }
        }
        .item-module {
          padding: 10px;
          .module-img {
            position: relative;
            img:nth-child(1) {
              width: 52px;
            }
            img:nth-child(2) {
              top: 5px;
              right: -35px;
              position: absolute;
              width: 25px;
              height: calc(25px * 20 / 37);
            }
          }
          .module-add {
            display: flex;
            align-items: center;
            column-gap: 5px;
          }
        }
        .item-active {
          background: #f0f1f3;
        }
      }
    }
  }
}
//左箭头样式
.body-left-collapse {
  width: 0;
  transition: all 0.2s ease;
  .left-content {
    display: none;
  }
}
.body-left-unfold {
  width: 10%;
  transition: all 0.2s ease;
  .left-content {
    display: block;
  }
}
</style>
